<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="PrimeFaces News">

        <!-- Groups -->
        <pm:view id="groups" swatch="c">
            <pm:header title="News" />

            <pm:content>
                <h:form id="groupsForm">

                    <p:dataList  value="#{newsController.groups}" var="group">
                        <p:column>
                            <p:commandLink value="#{group.title}" update=":entriesForm:entries" action="pm:summaries">
                                <f:setPropertyActionListener value="#{group}" target="#{newsController.selectedGroup}" />
                            </p:commandLink>
                        </p:column>
                    </p:dataList>

                </h:form>

            </pm:content>
        </pm:view>

        <!-- Summaries -->
        <pm:view id="summaries" swatch="c">
            <pm:header title="News">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>
                <h:form id="entriesForm">

                    <p:dataList id="entries" value="#{newsController.selectedGroup.entries}" var="entry">
                        <p:column>
                            <p:commandLink value="#{entry.title}" update=":content" action="pm:details">
                                <f:setPropertyActionListener value="#{entry}" target="#{newsController.selectedEntry}" />
                            </p:commandLink>
                        </p:column>
                    </p:dataList>
                    
                </h:form>
            </pm:content>
        </pm:view>

        <!-- Details -->
        <pm:view id="details" swatch="c">
            <pm:header title="News">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>
                <h:outputText id="content" value="#{newsController.selectedEntry.content}" escape="false" />
            </pm:content>
        </pm:view>

    </pm:page>
</f:view>